<!-- 广场 -->
<template>
	<view class="page">
		<!-- 顶部导航栏 -->
		<view class="tabbar" :style="{'height': tabbarHeight,'paddingTop': tabbarTop}">
			<view class="tabbar-img" @click="linklun">
				<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/square/%E6%96%B0%E5%A2%9E.png" mode=""
					lazy-load></image>
			</view>
			<view class="tabbar-title flex justify-center">
				活动
			</view>
		</view>
		<!-- 中心内容区域 -->
		<view class="content">
			<u-search placeholder="输入关键字搜索活动" v-model="listQurey.keywords" :show-action="false" :disabled="false" @change="search()" @confirm="search()"></u-search>
			<view style="height: 30rpx; width: 100%;">
				
			</view>
			<scroll-view scroll-y="true" class="scroll" @scrolltolower="scrollToLower1" lower-threshold='30' upper-threshold='0'
			:style="{'height': `calc(100vh - 50px - 124rpx - ${tabbarHeight}  - env(safe-area-inset-bottom))`}"
			@refresherrefresh="onfresh" :refresher-triggered="triggered" :refresher-threshold="45" refresher-enabled="refresher">
				<view class="list">
					<Activity v-for="item in list" :key="item.activityId" :item="item"></Activity>
					<loading :load1="load1" :load2="load2" :load3="load3"></loading>
				</view>
			</scroll-view>
		</view>
		<!-- 底部导航栏 -->
		<u-tabbar :list="tabbar" :border-top="false" :before-switch="click" inactive-color="#666666"
			active-color="#333333"></u-tabbar>
	</view>
</template>

<script>
	import Activity from '@/components/activity/activity.vue'
	import Loading from '@/components/loading/loading.vue'
	export default {
		components:{
			Activity,
			Loading
		},
		data() {
			return {
				tabbar: this.$store.state.list, //tabbar数据
				tabbarTop: 0,
				tabbarHeight: 0,
				background: {
					background: 'linear-gradient(135deg, #1C79F8, #0265EB)' //顶部导航背景色
				},
				triggered:false,
				_freshing: false,
				listQurey:{
					pageNum:1,
					pageSize:10,
					keywords:''
				},
				load1:2,
				load2:2,
				load3:2,
				list:[],
			}
		},
		onLoad() {
			this.init()
		},
		onShow() {
			if(uni.getStorageSync('fresh') == true){
				this.listQurey.pageNum = 1
				this.listQurey.keywords = ''
				this.load1 = 2
				this.list = []
				this.getList()
			}
			if(uni.getStorageSync('activity') > 0){
				let qurey = {
					pageNum: 1,
					pageSize: 10,
					keywords: this.listQurey.keywords
				}
				this.list.forEach((item, index)=>{
					if (item.activityId == uni.getStorageSync('activity')) {
						let n = index + 1
						if (n % 10 != 0) {
							qurey.pageNum = parseInt(n / 10 + 1)
						} else {
							qurey.pageNum = parseInt(n / 10)
						}
						this.$get('/activity/page', qurey).then((res) => {
							if (res.code == 200) {
								let list = this.list
								list.splice(index, 1, res.data.records[index % 10])
								this.list = list
								console.log(this.list)
							}
						})
					}
				})
			}
		},
		onHide() {
			uni.setStorageSync('fresh',false)
		},
		methods: {
			//初始化
			init() {
				this._setTabbarTitleHeight()
				this.getList()
			},
			scrollToLower1(){
				this.listQurey.pageNum+=1
				this.getList()
			},
			onfresh(){
				if(this._freshing){
					return
					} 
				this._freshing = true
				this.triggered = true
				this.load1 = 2
				this.list = []
				this.listQurey.pageNum = 1
				this.getList()
				setTimeout(()=>{
					this.triggered = false
					this._freshing = false
				},1000)
			},
			// scrollToUpper1(e){
			// 	console.info("scrollToUpper1",e)
			// },
			//设置title高度
			_setTabbarTitleHeight() {
				let top = uni.getStorageSync('tabbarCapsule')
				this.tabbarTop = top.top + 'px'
				this.tabbarHeight = top.bottom + 10 + 'px'
			},
			//前往发布页
			linklun(){
				uni.navigateTo({
					url: '/pagesA/launchEvent/launchEvent'
				})
			},
			//搜索
			search(){
				this.listQurey.pageNum = 1
				this.list = []
				this.getList()
			},
			//列表图片点击进入详情
			link(e){
				uni.navigateTo({
					url: "/pagesB/activityDetail/activityDetail?"
				})
			},
			//tabbar切换前的回调
			click(e) {
				return true
			},
			//请求分页数据
			async getList() {
				let {data: list,code} = await this.$get('/activity/page',this.listQurey)
				if(code == 200){
					if(this.listQurey.pageNum == 1){
						if(list.records.length!=10){
							this.load1 = 1
						}else{
							this.load1 = 0
						}
					}else{
						if(list.records.length!=0){
							this.load1 = 0
						}else{
							this.load1 = 1
						}
					}
					
					this.list = this.list.concat(list.records) 
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.page {
		min-height: 100vh;
		//padding-bottom: env(safe-area-inset-bottom);

		.tabbar {
			background: linear-gradient(135deg, #1C79F8, #0265EB);
			position: relative;

			.tabbar-img {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				bottom: 30rpx;
				left: 30rpx;
			}

			.tabbar-title {
				font-size: 40rpx;
				color: #FFFFFF;
				font-weight: 600;
			}
		}

		.content {
			background: #f5f5f5;
			padding: 30rpx 30rpx 0;

			.scroll {
				border-radius: 24rpx;
				overflow: hidden;
				.list {
					
				}
			}
		}
	}
</style>
